<template>

  <section class="login">

    <Header fixed @handle-left="goBack" :title="title"></Header>

    <div class="pt-20 layout">

      <div class="tab_btns">

        <field class="field_wrap" left-icon="phone-o" placeholder="请输入手机号" v-model="phone"></field>

        <field class="field_wrap" left-icon="shield-o" placeholder="请输入密码" type="password" v-model="loginPwd"></field>

      </div>

      <div class="btn_wrap"><Button block round type="info" @click="handleClicked">登录</Button></div>

    </div>

  </section>

</template>

<script>
import MainButton from '@/component_basics/MainButton'
import Header from '@/component_basics/Header'
import { Button, Toast } from 'vant'
import { Field } from 'vant'
import { kzLogin } from '@/services/index'

export default {
  name: 'login',
  components: {
    MainButton,
    Header,
    Button,
    Field
  },
  data() {
    return {
      title: '登录',
      phone: '',
      loginPwd: ''
    }
  },
  methods: {
    handleClicked() {
      if (!this.phone) {
        Toast('请输入手机号')
        return
      }
      if (!this.loginPwd) {
        Toast('请输入密码')
        return
      }
      kzLogin({ phone: this.phone, loginPwd: this.loginPwd }).then(res => {
        if (res && res.flag === 1) {
          Toast.success('登录成功')
          window.localStorage.setItem('h5_token', res.data.token)
          this.$router.push('/')
        }
      })
    },
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less">
.login {
  background-color: #f8f8f8;
  text-align: left;
  .pt-20 {
    padding-top: 1.17333rem;
  }
  .layout {
    margin: 1rem;
    .tab_btns {
      background-color: #fff;
      border-radius: 12px;
      overflow: hidden;
      .field_wrap {
        line-height: 1rem;
        .van-field__left-icon {
          .van-icon {
            font-size: 0.5rem;
          }
        }
        .van-cell__value {
          padding-left: 0.1rem;
        }
      }
    }
    .btn_wrap {
      margin-top: 1rem;
    }
  }
}
</style>

